<template>
  <div class="nav-bar weui-flex ta-c">
    <div class="nav-bar-item weui-flex__item" :class="{'_c': nav == 'card'}" @tap="handleChangeNav('card')">
      单词跟读
      <div class="badge">{{cardsCount}}</div>
    </div>
    <div class="nav-bar-item weui-flex__item" :class="{'_c': nav == 'sentence'}" @tap="handleChangeNav('sentence')">
      句子跟读
      <div class="badge">{{sentencesCount}}</div>
    </div>
  </div>
</template>

<script>
import {mapState, mapActions, mapGetters} from 'vuex'
export default {
  computed: {
    ...mapState('exercise-select', [
      'nav'
    ]),
    ...mapGetters('exercise-select', [
      'cardsCount',
      'sentencesCount',
    ])
  },
  methods: {
    ...mapActions('exercise-select', [
      'handleChangeNav'
    ])
  }
}
</script>

<style scoped lang="less">
@import '../../assets/less/var.less';
.nav-bar {
  border-bottom: 1px solid @colorBorder;
}
.nav-bar-item {
  padding: 10px 0;
  color: @colorGray;
  position: relative;
  &._c {
    position: relative;
    color: @colorPrimary;
    &::after {
      content: "";
      display: block;
      width: 100%;
      height: 1px;
      background-color: @colorPrimary;
      position: absolute;
      left: 0;
      bottom: -1rpx;
      z-index: 10;
    }
  }
}
.badge {
  position: absolute;
  font-size: 10px;
  background-color: @colorPrimary;
  color: white;
  padding: 0 5px;
  border-radius: 15px;
  z-index: 11;
  top: 0;
  right: 10%;
}
</style>
